<template>
  <all-header :title="$route.meta.title" />
  <div class="tab">
    <van-tabs v-model:active="tab" title-active-color="black" color="black">
      <van-tab title="全部"></van-tab>
      <van-tab title="进行中"></van-tab>
      <van-tab title="已完成"></van-tab>
    </van-tabs>
  </div>
  <div class="list">
    <van-pull-refresh
      v-model="refreshloading"
      @refresh="onRefresh"
      class="refresh"
    >
       <van-empty
          description="暂无藏品"
          v-if="orderList.length < 1 && !refreshloading &&!loading"
       />
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了, 拉我刷新"
        @load="onLoad"
      >
        <van-cell
          v-for="item in orderList"
          :key="item.id"
          class="item"
          @click="$router.push({name: 'orderdetail', params: {id: item.order_id}})"
        >
          <div class="top">
            <div class="status">
              {{
                item.status == 0
                  ? "付款中"
                  : item.status == 1
                  ? "付款成功"
                  : item.status == 2
                  ? "付款失败"
                  : item.status == 4
                  ? "订单取消"
                  : "订单超时"
              }}
            </div>
            <div class="todetail">
              <div class="text">查看详情</div>
              <img src="../../assets/image/my/mores.png" alt="" />
            </div>
          </div>
          <div class="content">
            <div class="left">
              <img :src="setting.file_url + item.photo" alt="" />
              <div class="name_num">
                <div class="name">{{ item.name }}</div>
                <div class="num"><span>发售量:</span>{{ item.num }}</div>
              </div>
            </div>
            <div class="right">
              <div class="price">￥{{ item.price }}</div>
              <div class="date">{{ item.created_at }}</div>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup>
import { computed, ref, watch } from "vue";
import commonStore from "../../store/common";
import rechargeStore from "../../store/recharge";

const common = commonStore();
const setting = computed(() => common.setting);

let tab = ref(0);
let loading = ref(false);
let refreshloading = ref(false);
let finished = ref(false);
let orderList = ref([]);
const recharge = rechargeStore();
const param = ref({
  page: 1,
  sort: "",
  status: 0,
  type: [1, 2],
});

const onRefresh = () => {
  param.value.page = 1;
  refreshloading.value = true;
  orderList.value = [];
  onLoad();
};

const onLoad = () => {
  // 触底加载
  loading.value = true;
  refreshloading.value = false;
  finished.value = false;
  recharge.getrechargeList(param.value).then((res) => {
    refreshloading.value = false;
    loading.value = false;
    if (param.value.page != res.last_page) {
      param.value.page++;
    } else {
      finished.value = true;
    }
    orderList.value.push(...res.data);
  }).catch(() => { 
    loading.value = false
    refreshloading.value = false
    finished.value = true
  })
};

watch(tab, (newVal) => {
  param.value.page = 1;
  param.value.status = newVal;
  onRefresh();
});
</script>

<style lang="scss" scoped>
.tab {
  position: fixed;
  top: 0.7692rem;
  z-index: 999;
  width: 100%;
}
.item {
  padding: 0.3846rem;
}
.list {
  width: 100%;
  height: 88%;
  padding-top: 20%;
}
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
  padding-bottom: 0.0962rem;
  .todetail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #9a9a9a;
  }
  img {
    width: 0.2885rem;
    height: 0.2885rem;
  }
}
.content {
  img {
    width: 1.5385rem;
    height: 1.5385rem;
    margin-right: 0.1923rem;
    border-radius: 0.1923rem;
  }
  display: flex;
  align-items: center;
  justify-content: space-between;

  .left {
    display: flex;
    font-weight: bold;
    .name {
      font-size: 0.2885rem;
      padding-bottom: 0.0962rem;
    }
    .num {
      span {
        color: #9a9a9a;
      }
    }
  }
  .right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    .price {
      font-weight: bold;
      font-size: 0.3846rem;
    }
    .date {
      color: #9a9a9a;
      font-weight: bold;
    }
  }
}
.refresh {
  overflow: auto;
  width: 100%;
  height: 100%;
}
</style>